import React, { useEffect, useState } from 'react'
import { Button, Drawer, message } from 'antd';
import axios from 'axios';

export default function List() {
    const [messageApi, contextHolder] = message.useMessage();
    const success = () => {
        messageApi.open({
            type: 'success',
            content: '删除成功',
        });
    };
    let [data, setData] = React.useState([])
    let [arr, setArr] = React.useState({})
    useEffect(() => {
        getData()
    }, [])
    let getData = async () => {
        let { data: { data } } = await axios.get('http://localhost:3000/show')
        setData(data)
    }

    const [open, setOpen] = useState(false);
    const showDrawer = (i) => {
        setArr(i);
        setOpen(true);
    };
    const onClose = () => {
        setOpen(false);
    };
    let del = async (id) => {
        await axios.get('http://localhost:3000/del?id=' + id)
        getData()
        success()
    }
    return (
        <div>
            {contextHolder}
            {data.map((i, j) => (
                <div className="boox" key={j}>
                    <div className="left">
                        <img src={i.img} alt="" />

                    </div>
                    <div className="right">
                        <p>{i.title}</p>
                        <Button type="primary" size='large' className='btn1' onClick={() => { showDrawer(i) }}>
                            查看数据
                        </Button>
                        <Button type="primary" size='large' className='btn1' onClick={() => { del(i._id) }}>
                            删除
                        </Button>
                    </div>
                </div>
            ))}
            <Drawer title={arr.title} onClose={onClose} open={open}>
                <p>展现量：{arr.z_num}</p>
                <p>阅读量：{arr.y_num}</p>
            </Drawer>
        </div>
    )
}
